<script setup lang="ts">
import {ref} from 'vue'
import DeviceView from "@/views/device/DeviceView.vue";

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {

}
</script>

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="Panel List" name="1">
        <keep-alive>
          <DeviceView/>
        </keep-alive>

      </el-collapse-item>
      <el-collapse-item title="Doorbell" name="2">
        <DeviceView/>
      </el-collapse-item>
      <el-collapse-item title="Analog Signal" name="3">
        <DeviceView/>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>
.demo-collapse {

  background-color: #f5f5f5; /* 整体背景颜色 */
  border-radius: 8px;
  padding: 10px;

}

/* 使用 :deep() 选择器覆盖内部样式 */
:deep(.el-collapse-item__header) {
  //background-color: #3eaf7c;
  color: #000000;
  font-weight: bold;
}


</style>